<template>
  <van-cell-group>
    <!--
      要求的数组项
        item: {
          id,
          name, // 歌曲名
          maxBr, // 最大音质
          alias, // 别名
          artists, // 歌手数组
          albumName, // 专辑名
        }
     -->
    <van-cell
      v-for="(item, idx) in list"
      :key="item.id"
      :to="`/play/${ item.id }`"
      center
    >
      <template #icon>
        <div v-if="mode === 'rank'" :class="{ icon: true, top: idx < 3 }">
          {{ 9 > idx ? ('0' + (idx + 1)) : (idx + 1) }}
        </div>
        <div v-else-if="mode === 'normal'" class="icon">{{ idx + 1 }}</div>
      </template>
      <template #label>
        <span class="sq" v-if="item.maxBr > 320000"/>
        {{ getLabel(item) }}
      </template>
      <template #title>
        <div class="song-info">
          <span>{{ item.name }}</span>
          <span
            v-if="item.alias"
            class="song-title"
          >
            ({{ item.alias }})
          </span>
        </div>
      </template>
      <template #right-icon>
        <van-icon size="20" name="play-circle-o" />
      </template>
    </van-cell>
  </van-cell-group>
</template>

<script>
export default {
  props: {
    mode: { // 'rank' 排行榜模式 | 'normal'  普通模式 | 'default' 默认(不显示索引)
      type: String,
      default: 'default',
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    getLabel (item) {
      return `${ item.artists.map(item => item.name).join(' / ') } - ${ item.albumName }`;
    },
    getTitle (item) {
      if (item.alias) {
        return `${ item.name } (${ item.alias })`;
      } else {
        return item.name;
      }
    },
  },
}
</script>

<style scoped>
.icon {
  margin-right: 8px;
}
.icon.top {
  color: red;
}
.song-title {
  color: #ccc;
}
.song-info {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  width: calc(200% - 42px);
}
.sq {
  background-image: url('https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=');
  background-size: 166px 97px;
  display: inline-block;
  width: 12px;
  height: 8px;
}
</style>